<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        :size="'default'"
        status-icon
    >
        <el-form-item label="放箱单格式" prop="form_style">
            <el-radio-group v-model="formData.form_style">
                <el-radio :value="'nologo'">不带logo</el-radio>
                <el-radio :value="'logo'">带logo</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="箱量" prop="cntr_num">
            <el-input-number v-model.trim="formData.cntr_num" :min="0" />
        </el-form-item>
        <el-form-item label="箱况" prop="dam_id">
            <el-select v-model="formData.dam_id" :clearable="true">
                <el-option
                    v-for="optValue in cntrDam"
                    :key="optValue.value"
                    :label="optValue.label"
                    :value="optValue.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="放箱信息" prop="cntr_info">
            <el-input
                v-model="formData.cntr_info"
                :rows="4"
                type="textarea"
                placeholder="Please input"
            />
        </el-form-item>
        <el-button class="btn" type="primary" v-debounce="onSave" size="large">
            保存
        </el-button>
    </el-form>
</template>
<script setup lang="ts" name="ReleaseOrder">
import { ref, reactive, onMounted } from 'vue';
import { ReleaseFormModel, OutPlanModel } from '@/common/types/container';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { ValidateFieldsError } from 'async-validator';
import { Request } from '@/app/request';
import { useAppStore } from '@/store/app';
import { storeToRefs } from 'pinia';

const formRef = ref<FormInstance>();
const formData = reactive<ReleaseFormModel>({});
const { cntrDam } = storeToRefs(useAppStore());
const props = defineProps<{
    plan: OutPlanModel;
}>();
const emit = defineEmits<{
    close: [];
}>();
const rules = reactive<FormRules>({
    form_style: [{ required: true, message: '请选择格式', trigger: 'blur' }],
    cntr_num: [{ required: true, message: '请输入箱量', trigger: 'blur' }],
    cntr_info: [
        {
            required: true,
            message: '请输入箱信息',
            trigger: 'blur',
        },
    ],
});
onMounted(() => {
    formData.plan_id = props.plan.id;

    // formData.release_no = props.plan.bill_no;
    // formData.cntr_siz_cod = props.plan.cntr_siz_cod;
    // formData.cntr_typ_cod = props.plan.cntr_typ_cod;
    // formData.dam_id = props.plan.dam_id;

    formData.form_style = 'nologo';
});
const onSave = async () => {
    const formValid = await formRef.value?.validate(
        (isValid: boolean, _invalidFields?: ValidateFieldsError) => {},
    );
    if (formValid) {
        const cntrinfos = formData.cntr_info?.split('\n');
        if ((cntrinfos?.length as number) > 11) {
            ElMessage.info({
                message: '放箱信息不能超过11行',
            });
            return;
        }
        formData.cntr_corp_cod = props.plan.cntr_corp_cod;
        // console.log(formData);
        
        const req = new Request('生成放箱单', formData);
        const r = await req.post();
        if (r.code > 100) {
            window.open(r.obj, '_blank');
            emit('close');
        }
    }
};
</script>
<style lang="scss" scoped></style>
